import 'package:flutter/material.dart';

main() =>
    runApp(MaterialApp(debugShowCheckedModeBanner: false, home: ProfilePage()));
var color1 = Color(0xFFa572c0);
var color2 = Color(0xFF6559d4);
var avatar = NetworkImage('http://i2.bvimg.com/688304/4feecc9daaf859b9.jpg');

class ProfilePage extends StatefulWidget {
  @override
  createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  @override
  build(context) => Scaffold(
          body: Column(
        children: [
          SizedBox(
            height: 8.0,
          ),
          UpperSection(),
          SizedBox(
            height: 32.0,
          ),
          MiddleSection(),
          Spacer(),
          BottomSection(),
        ],
      ));
}

class BottomSection extends StatelessWidget {
  @override
  build(context) => Container(
        height: 50.0,
        color: color1.withOpacity(0.2),
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 32.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Text('安全&数据'),
                  SizedBox(
                    width: 16.0,
                  ),
                  Text('设置'),
                ],
              ),
              Text('帮助')
            ],
          ),
        ),
      );
}

class MiddleSection extends StatelessWidget {
  @override
  build(context) => Padding(
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        child: Column(
          children: [
            Divider(
              height: 8.0,
            ),
            ListTile(
              title: Text('今日活动'),
              subtitle: Text('31个任务在5个分类'),
              trailing: ClipOval(
                child: Container(
                    height: 40.0,
                    width: 40.0,
                    color: Colors.green.withOpacity(0.2),
                    child: IconButton(
                      onPressed: () {},
                      icon: Icon(Icons.add),
                      color: Colors.green,
                    )),
              ),
            ),
            SizedBox(
              height: 8.0,
            ),
            Padding(
              padding: EdgeInsets.only(left: 16.0),
              child: Container(
                height: 160.0,
                child: ListView(
                  padding: EdgeInsets.all(0.0),
                  scrollDirection: Axis.horizontal,
                  children: [
                    ItemCard(Icons.favorite, '健康', '2 任务'),
                    ItemCard(Icons.person, '个人', '3 任务'),
                    ItemCard(Icons.power, '效率', '4 任务'),
                    ItemCard(Icons.power, '效率', '4 任务'),
                    ItemCard(Icons.power, '效率', '4 任务'),
                  ],
                ),
              ),
            )
          ],
        ),
      );
}

class ItemCard extends StatelessWidget {
  ItemCard(this.icon, this.name, this.task);
  final icon;
  final name;
  final task;
  @override
  build(context) => Padding(
        padding: EdgeInsets.only(right: 8.0),
        child: Container(
          height: 160.0,
          width: 120.0,
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.topRight,
                  end: Alignment.bottomLeft,
                  colors: [color1, color2])),
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Icon(
                  icon,
                  color: Colors.white,
                ),
                Spacer(),
                Text(
                  name,
                  style: TextStyle(
                      color: Colors.white, fontWeight: FontWeight.bold),
                ),
                SizedBox(
                  height: 4.0,
                ),
                Text(
                  task,
                  style: TextStyle(color: Colors.white.withOpacity(0.6)),
                ),
              ],
            ),
          ),
        ),
      );
}

class UpperSection extends StatelessWidget {
  @override
  build(context) => Column(
        children: [
          SizedBox(
            height: 32.0,
          ),
          Padding(
            padding: EdgeInsets.all(32.0),
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Icon(
                      Icons.menu,
                      color: color1,
                    ),
                    Icon(
                      Icons.settings,
                      color: color1,
                    ),
                  ],
                ),
                SizedBox(
                  height: 8.0,
                ),
                CircleAvatar(
                  backgroundImage: avatar,
                ),
                SizedBox(
                  height: 16.0,
                ),
                Text(
                  '安德鲁·切斯特',
                  style: TextStyle(
                    fontSize: 24.0,
                  ),
                ),
                SizedBox(
                  height: 4.0,
                ),
                Text(
                  '目标和任务',
                  style: TextStyle(color: Colors.grey),
                )
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.only(left: 32.0),
            child: Container(
              height: 4.0,
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                      colors: [color1, color2])),
            ),
          ),
          SizedBox(height: 16.0),
          Padding(
            padding: EdgeInsets.only(left: 32.0, right: 48.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(
                  children: [
                    Text(
                      '54',
                      style: TextStyle(fontSize: 24.0),
                    ),
                    Text(
                      '创建',
                      style: TextStyle(color: Colors.grey),
                    ),
                    Text(
                      '任务',
                      style: TextStyle(color: Colors.grey),
                    )
                  ],
                ),
                Column(
                  children: [
                    Text(
                      '38',
                      style: TextStyle(fontSize: 24.0),
                    ),
                    Text(
                      '完成',
                      style: TextStyle(color: Colors.grey),
                    ),
                    Text(
                      '任务',
                      style: TextStyle(color: Colors.grey),
                    )
                  ],
                ),
                Column(
                  children: [
                    Text(
                      '27',
                      style: TextStyle(fontSize: 24.0),
                    ),
                    Text(
                      '到达',
                      style: TextStyle(color: Colors.grey),
                    ),
                    Text(
                      '目标',
                      style: TextStyle(color: Colors.grey),
                    )
                  ],
                ),
              ],
            ),
          )
        ],
      );
}
